<!--
 * @Author 邵渊
 * @LastEditors: 邵渊
 * @Description: 树形控件
-->
<template>
  <div class="lc-tree">
    <div class="tree-btn">
      <div class="btn-left">
        <el-button
          text
          type="primary"
          size="small"
          :icon="Plus"
          @click="addNode('equal')"
          >新增同级</el-button
        >
        <el-button
          text
          type="primary"
          size="small"
          :icon="Plus"
          @click="addNode('junior')"
          >新增下级</el-button
        >
        <el-button
          text
          type="danger"
          size="small"
          :icon="Delete"
          @click="deleteNode"
          >删除</el-button
        >
      </div>
      <div class="btn-right">
        <el-button
          text
          type="info"
          v-show="!isExpand"
          size="small"
          :icon="Expand"
          @click="handleExpand('expand')"
          >展开</el-button
        >
        <el-button
          text
          type="info"
          v-show="isExpand"
          size="small"
          :icon="Fold"
          @click="handleExpand('fold')"
          >折叠</el-button
        >
      </div>
    </div>
    <el-tree
      ref="lcTreeRef"
      :data="treeData"
      :expand-on-click-node="false"
      :props="config.defaultProps"
      :show-checkbox="config.showCheckbox"
      :default-expand-all="config.expandAll"
      :node-key="config.nodeKey"
      :draggable="config.draggable"
      :allow-drop="allowDrop"
      @node-click="nodeClick"
      @check="handleTreeCheckChange"
    >
      <template #default="{ node, data }">
        <span
          :class="[
            { 'custom-tree-node-add': data.type == 'add' },
            { 'custom-tree-node-edit': data.type == 'edit' },
            { 'custom-tree-node-delete': data.type == 'delete' },
          ]"
        >
          <lc-svg-icon
            class="lc-svg-icon"
            :icon-class="data.icon"
          ></lc-svg-icon>
          <span>{{ node.label }}</span>
          <!-- <span>
              <a @click="append(data)"> 新增 </a>
              <a style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
            </span> -->
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { Delete, Fold, Plus, Expand } from "@element-plus/icons-vue";

const props = defineProps({
  modelValue: {
    type: [Array],
    default: (_) => [],
  },
  treeData: {
    type: [Array],
    default: (_) => [],
  },
  config: {
    type: [Object],
    default: (_) => {},
  },
});

const emits = defineEmits([
  "update:modelValue",
  "handleCheckChange",
  "delete-node",
  "add-node",
  "allow-drop",
  "node-click",
]);

const lcTreeRef = ref();
const nodeData = ref();
const isExpand = ref(true);

onMounted(() => {
  watch(
    () => props.modelValue,
    (val) => {
      if (Array.isArray(val)) {
        lcTreeRef.value?.setCheckedKeys(val);
      }
    },
    { immediate: true },
  );
});

function handleTreeCheckChange(_, tree) {
  emits("update:modelValue", tree.checkedKeys);
  emits("handleCheckChange", tree.checkedKeys);
}

const nodeClick = (val) => {
  nodeData.value = val;
  emits("node-click", val);
};

const allowDrop = (prev, inner) => {
  let flag = false;
  emits("allow-drop", {
    prev: prev,
    inner: inner,
    fn: (i) => {
      flag = i;
    },
  });
  return flag;
};

const handleExpand = (val) => {
  if (val == "expand") {
    for (let i = 0; i < lcTreeRef.value.store._getAllNodes().length; i++) {
      lcTreeRef.value.store._getAllNodes()[i].expanded = true;
    }
    isExpand.value = true;
  } else {
    for (let i = 0; i < lcTreeRef.value.store._getAllNodes().length; i++) {
      lcTreeRef.value.store._getAllNodes()[i].expanded = false;
    }
    isExpand.value = false;
  }
};
const deleteNode = () => {
  emits("delete-node", nodeData.value);
};

const addNode = (val) => {
  emits("add-node", val, nodeData.value);
};
</script>
<style scoped>
.lc-tree {
  .tree-btn {
    height: 30px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
  }
}
/* 新增项背景色 */
.custom-tree-node-add {
  background-color: rgb(133.4, 206.2, 97.4);
}
/* 修改项背景色 */
.custom-tree-node-edit {
  background-color: rgb(235, 180.6, 10);
}
/* 删除项背景色 */
.custom-tree-node-delete {
  background-color: rgb(247, 137.4, 137.4);
}
</style>
